<template>
  <div style="height: 100%">
    <el-row class="nav">
      <i class="el-icon-arrow-left"
         @click="goBack"></i>
      <span class="font-weight"
            v-if="!$store.state.filterMenuId">新建过滤器菜单</span>
      <span class="font-weight"
            v-else>编辑过滤器菜单</span>
    </el-row>
    <el-divider></el-divider>
    <div class="rl-dw">
      <el-form ref="form"
               :model="form"
               label-width="130px"
               :rules="rules"
               class="ab-dw">
        <el-form-item label="菜单名称"
                      prop="name">
          <el-input v-model="form.name"
                    type="text"
                    show-word-limit
                    maxlength="20"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input type="textarea"
                    v-model="form.menuDesc"></el-input>
        </el-form-item>
        <el-form-item label="菜单状态">
          <el-radio v-model="form.status"
                    :label="1"
                    :disabled="form.tagId === 1">启用</el-radio>
          <el-radio v-model="form.status"
                    :label="0"
                    :disabled="form.tagId === 1">停用</el-radio>
        </el-form-item>
        <el-form-item label="状态顺序"
                      prop="ordering"
                      :style="{ width: '180px' }">
          <el-input v-model.number="form.ordering"
                    autocomplete="off"
                    :disabled="form.tagId === 1"></el-input>
        </el-form-item>
        <el-form-item label="菜单可见范围">
          <el-select v-model="region"
                     placeholder="请选择菜单可见范围"
                     @change="changeMenuRange">
            <el-option v-for="item in menuRange"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <!-- 部门 -->
          <el-cascader v-if="deptShow == 'dept'"
                       expand-trigger="hover"
                       :options="userOptions"
                       :props="{value:'value',label:'label',children:'children',multiple: true,checkStrictly: true }"
                       v-model="userValue"
                      >
          </el-cascader>
          <!-- 其他的 -->
          <el-select v-else-if="deptShow !== 'all'"
                     style="width:250px"
                     multiple
                     v-model="userValue"
                     filterable
                     placeholder="请添加用户">
            <el-option :style="{ width: '200px', 'margin-left': '20px' }"
                       v-for="item in userOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="列表数据可见范围" v-if="form.tagId == 1 && form.id ==1 ">
          <el-select v-model="dataRegion"
                     placeholder="请选择列表数据可见范围"
                     @change="changeDataRange">
            <el-option v-for="item in menuRange"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <!-- 部门 -->
          <el-cascader v-if="dataDeptShow == 'dept'"
                       expand-trigger="hover"
                       :options="dataUserOptions"
                       :props="{value:'value',label:'label',children:'children',multiple: true,checkStrictly: true }"
                       v-model="dataUserValue"
                      >
          </el-cascader>
          <!-- 其他的 -->
          <el-select v-else-if="dataDeptShow !== 'all'"
                     style="width:250px"
                     multiple
                     v-model="dataUserValue"
                     filterable
                     placeholder="请添加用户">
            <el-option :style="{ width: '200px', 'margin-left': '20px' }"
                       v-for="item in dataUserOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属流程"
                      prop="workOrderTypeId"
                      style="height: 100%"
                      v-if="form.tagId !== 1">
          <el-select v-model="form.workOrderTypeId"
                     placeholder="请选择所属流程"
                     :disabled="form.tagId === 1"
                     @change="changeWorkType">
            <el-option v-for="item in cores"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="筛选条件"
                      v-if="form.tagId !== 1"
                      class="select-table">
          满足下列所有条件
          <el-table :data="tableData"
                    key="122"
                    style="width: 100%">
            <el-table-column label="类型"
                             width="180">
              <template slot-scope="scope">
                <el-select v-model="scope.row.typeValue"
                           @change="changeType(scope.$index, scope.row)">
                  <el-option v-for="item in selectAllConditionVal"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="包含"
                             width="300">
              <template slot-scope="scope">
                <el-select v-model="scope.row.containValueUser"
                           style="width:40%"
                           v-show="scope.row.tagShow === 2"
                           @change="changeUser(scope.$index, scope.row)">
                  <el-option v-for="item in scope.row.selectSecondConditionValUser"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
                <el-select v-model="scope.row.containValue"
                           @change="changeContain(scope.$index, scope.row)"
                           style="width:50%">
                  <el-option v-for="item in scope.row.selectSecondConditionVal"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="信息"
                             width="300px">
              <template slot-scope="scope">
                <!-- 其他数据 -->
                <el-select style="width:80%"
                           v-if="scope.row.tagIn === 3 && scope.row.shapeTag === 2 && scope.row.containValueUser !='dept'"
                           v-model="scope.row.infoVals"
                           multiple
                           filterable
                           default-first-option
                           @change="selectsChange(scope.$index, scope.row)"
                           placeholder="请选择">
                  <el-option v-for="item in scope.row.dataList"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
                <!-- 部门数据 -->
                <el-cascader style="width:80%"
                             v-else-if="scope.row.tagIn === 3 && scope.row.shapeTag === 2 && scope.row.containValueUser =='dept'"
                             expand-trigger="hover"
                             filterable
                             :options="scope.row.dataList"
                             placeholder="请选择"
                             :props="{value:'value',label:'label',children:'children',multiple: true,checkStrictly: true }"
                             v-model="scope.row.infoVals"
                             @change="selectsChange(scope.$index, scope.row)">
                </el-cascader>
                <el-input style="width:80%"
                          v-if="scope.row.tagIn === 0 && scope.row.shapeTag === 1"
                          v-model="scope.row.infoVal"
                          placeholder="请输入内容"></el-input>
                <p style="width:80%;"
                   v-if="scope.row.tagIn === 1 && scope.row.shapeTag === 4">
                  <el-input type="number"
                            style="width:100px"
                            v-model="scope.row.infoVal"
                            :min="0"></el-input>
                  <span>次</span>
                </p>
                <p style="width:80%;"
                   v-if="scope.row.tagIn === 1 && scope.row.shapeTag === 5">
                  <el-input type="number"
                            style="width:30%"
                            v-model="scope.row.infoVal"
                            :min="0"></el-input>
                  <span>小时</span>
                </p>
                <p style="width:100%;"
                   v-if="scope.row.tagIn === 2 && scope.row.shapeTag === 5">
                  <el-input type="number"
                            style="width:30%"
                            v-model="scope.row.hourOne"
                            :min="0"
                            @blur="hourChange(scope.$index, scope.row)"></el-input>
                  <span>-</span>
                  <el-input type="number"
                            style="width:30%"
                            v-model="scope.row.hourTwo"
                            :min="0"
                            @blur="hourChange(scope.$index, scope.row)"></el-input>
                  <span>小时</span>
                </p>
                <el-date-picker style="width:80%;"
                                v-show="scope.row.tagIn === 1 && scope.row.shapeTag === 3"
                                v-model="scope.row.infoVals"
                                value-format="yyyy-MM-dd"
                                type="date"
                                placeholder="选择日期"
                                @change="chooseTimeRange(scope.$index, scope.row)">
                </el-date-picker>
                <el-date-picker v-show="scope.row.tagIn === 2 && scope.row.shapeTag === 3"
                                style="width:80%"
                                v-model="scope.row.infoVal"
                                value-format="yyyy-MM-dd"
                                type="daterange"
                                range-separator=""
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                @change="chooseTimeRange(scope.$index, scope.row)">
                </el-date-picker>
                <!-- 其他数据 -->
                <el-select @change="changeSelect(scope.$index, scope.row)"
                           v-if="scope.row.tagIn === 1 && scope.row.shapeTag === 2 && scope.row.containValueUser != 'dept'"
                           v-model="scope.row.infoVal"
                           placeholder="请选择">
                  <el-option v-for="item in scope.row.dataList"
                             :key="item.value+''"
                             :label="item.label"
                             :value="item.value+''">
                  </el-option>
                </el-select>
                <!-- 部门数据 -->
                <el-cascader v-if="scope.row.tagIn === 1 && scope.row.shapeTag === 2 && scope.row.containValueUser == 'dept'"
                             expand-trigger="hover"
                             filterable
                             :options="scope.row.dataList"
                             placeholder="请选择"
                             :props="{value:'value',label:'label',children:'children'}"
                             v-model="scope.row.infoVal"
                             @change="changeSelect(scope.$index, scope.row)">
                </el-cascader>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini"
                           type="danger"
                           @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <i class="el-icon-circle-plus-outline button sequence-flow-btn"
             @click="addTableData()">&nbsp;&nbsp;添加筛选条件</i>
          <!-- <el-button type="text"
                     class="button"
                     size="small"
                     icon="el-icon-circle-plus-outline"
                     @click="addTableData()">添加筛选条件</el-button> -->
        </el-form-item>
        <el-form-item label='表头设置'
                      class="table_header_setting"
                      v-if="form.tagId !== 1">
          <el-transfer v-model="orderHeaderValue"
                       filterable
                       :props="{key: 'prop',label: 'label'}"
                       :titles="['全部字段','列表中展示字段']"
                       style='float:left;'
                       :data="orderHeaderData">
          </el-transfer>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     class="el-button el-button--primary el-button--medium h30Btn fr"
                     @click="onSubmit('form')">完成</el-button>
          <!-- <el-button>取消</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getWorkOrderTypeByUserId, allBaseBussinessField } from "@/api/workOrderController"
import {
  selectById,
  createWorkOrderFilterMenu,
  selectOrder,
  updateContent,
  selectAllCondition,
  selectSecondCondition,
  selectThirdConditionForCurrentUser
} from "@/api/filterMenu";
import { userSelectOrder, selectAllMenuVisibleType } from "@/api/typeMenu.js";
export default {
  data () {
    // const generateData = _ => {
    //   const data = [{
    //     lable: "编号",
    //     prop: "id",
    //     slot: true,
    //     type: "input",
    //   },
    //   {
    //     label: '客户',
    //     prop: 'clientName'
    //   },
    //   {
    //     label: '优先级',
    //     prop: 'priority',
    //     type: 'cascader'
    //   }];
    //   return data;
    // };
    return {
      orderHeaderData: [],
      orderHeaderValue: [],
      deptShow: 'all', //可见范围处的显示
      indexWorkNode: "",
      indexWorkType: "",
      allTableData: [],
      selectAllConditionVal: [],
      selectSecondConditionVal: [],
      selectSecondConditionValUser: [],
      userOptions: [],
      region: "all",
      menuRange: [],
      userValue: [],
      // 列表可见范围
      dataRegion:'all',
      dataUserValue:[],
      dataDeptShow:'all',
      dataUserOptions:[],
      cores: [],
      tagShow: 0,
      tagId: "",
      workOrderTypeName: "",
      tableData: [
        {
          typeValue: "", // 第一个值
          containValue: "", // 第二个值
          containValueUser: "", // 第二个值
          info: "",
          selectSecondConditionVal: [],
          selectSecondConditionValUser: [],
          tagShow: 1,
          userVal: [],
          dataList: [
            {
              label: "下拉框1",
              value: "下拉框1"
            },
            {
              label: "下拉框2",
              value: "下拉框2"
            }
          ],
          shapeTag: "",
          tagIn: "",
          infoVal: "", // 第三个值
          infoVals: [], // 第三个值
          hourOne: "",
          hourTwo: ""
        }
      ],
      form: {
        name: "",
        menuDesc: "",
        status: 1,
        workOrderTypeId: "",
        workOrderTypeName: "",
        ordering: "",
        type: ""
      },
      state: "",
      rules: {
        name: [
          {
            required: true,
            message: "请输入菜单名称",
            trigger: ["blur", "change"]
          }
        ],
        ordering: [
          { required: true, message: "不能为空" },
          { type: "number", message: "必须为数字值" }
        ],
        workOrderTypeId: [
          {
            required: true,
            message: "请选择所属流程",
            trigger: ["blur", "change"]
          }
        ],
        region: [
          {
            required: true,
            message: "请选择菜单可见范围",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  watch: {
  },
  mounted () {
    this.allBaseBussinessField(this.form.workOrderTypeId + '' || '')
    if (this.$store.state.filterMenuId) {
      this.getSelectAllCondition();
      this.getSelectById();
      this.getSelectAllNewable();
    } else {
      this.getSelectAllNewable();
      this.getSelectAllMenuVisibleType();
      this.getSelectOrder();
      this.tagId = 0;
      this.getSelectAllCondition();
      this.handleDelete();
    }
  },
  computed: {
    orderHeaderArray: function orderHeaderArray () {
      let Arr = []
      this.orderHeaderValue && this.orderHeaderValue.forEach(item1 => {
        this.orderHeaderData && this.orderHeaderData.forEach(item2 => {
          if (item1 === item2.prop) {
            Arr.push(item2)
          }
        })
      })
      return Arr
    }
  },
  methods: {
    allBaseBussinessField (id) {
      if (!id) {
        return
      }
      let _this = this
      allBaseBussinessField(id).then(res => {
        if (res.data.retCode === 200) {
          let newarr = res.data.data || []
          // 过滤栅格布局/分割线字段
          _this.orderHeaderData = newarr.filter(item => (item.type != 'grid' && item.type != 'divider' && item.type != 'fileupload' && item.type != 'imgupload'))
          return _this.orderHeaderData
        }
      })
    },
    // 人/角色/部门数据赋值
    selectAlllInfoFun (val) {
      if (val === 'user') {
        return window.CONFIG.selectAllInfo.userList
      } else if (val === 'role') {
        return window.CONFIG.selectAllInfo.roleList
      } else if (val === 'dept') {
        return window.CONFIG.selectAllInfo.deptList
      } else if (val === 'all') {
        return []
      }
    },
    chooseTimeRange (index, row) {
      if (
        this.tableData[index].tagIn === 1 &&
        this.tableData[index].shapeTag === 3
      ) {
        this.tableData[index].infoVal = row.infoVals;
      } else if (
        this.tableData[index].tagIn === 2 &&
        this.tableData[index].shapeTag === 3
      ) {
        this.tableData[index].infoVal = row.infoVal;
      }
    },
    changeUser (index, row) {
      this.tableData[index].containValue = "";
      this.tableData[index].infoVals = "";
      this.tableData[index].infoVal = "";
    },
    goBack () {
      this.$router.push("/customMenu");
      this.$store.commit("optionTypeFun", "2");
    },
    getSelectAllCondition () {
      selectAllCondition().then(res => {
        if (res.data.retCode === 200) {
          this.selectAllConditionVal = res.data.data;
        }
      });
    },
    changeSelect (index, row) {
      // this.tableData.push({})
      // this.tableData.splice(index + 1, 1)
    },
    changeType (index, row) {
      if (row.typeValue === 8) {
        this.indexWorkNode = index;
        this.indexWorkType = row.typeValue;
      }
      this.tableData[index].containValue = "";
      this.tableData[index].containValueUser = "";
      this.tableData[index].infoVal = "";
      this.tableData[index].infoVals = "";
      //  await this.tableData.push({})
      //  await this.tableData.splice(index + 1, 1)
      selectSecondCondition(row.typeValue).then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          this.tableData[index].selectSecondConditionVal = data.data.data;
          this.tableData[index].selectSecondConditionValUser =
            data.data.type || "";
          this.tableData[index].tagShow = data.data.tag;
          this.tableData[index].tagIn = 0;
          this.tableData[index].shapeTag = 0;
        }
      });
    },
    changeContain (index, row) {
      // this.tableData.push({})
      // this.tableData.splice(index + 1, 1)
      this.tableData[index].infoVal = "";
      this.tableData[index].infoVals = "";
      // 切换到时间段的时候清空数据
      if (
        this.tableData[index].tagIn === 2 &&
        this.tableData[index].shapeTag === 5
      ) {
        this.tableData[index].hourOne = "";
        this.tableData[index].hourTwo = "";
      }
      let params = {
        firstId: row.typeValue,
        name: "",
        secondDataId: row.containValue,
        secondTypeId: row.containValueUser,
        // workOrderTypeId: this.form.workOrderTypeId 
        workOrderTypeId: this.form.workOrderTypeId
      };
      selectThirdConditionForCurrentUser(params).then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          this.tableData[index].dataList = data.data.dataList;
          this.tableData[index].shapeTag = data.data.shapeTag;
          this.tableData[index].tagIn = data.data.tagIn;
        } else {
          this.$message({
            type: "error",
            message: data.msg
          });
        }
      });
    },
    changeWorkType () {
      this.allBaseBussinessField(this.form.workOrderTypeId + '')
      this.cores.map((value, key, index) => {
        if (value.id === this.form.workOrderTypeId) {
          this.workOrderTypeName = value.name;
          this.form.workOrderTypeName = value.name;
        }
      });
      if (this.indexWorkType === 8) {
        this.tableData[this.indexWorkNode].containValue = "";
        this.tableData[this.indexWorkNode].infoVal = "";
      }
    },
    getSelectOrder () {
      selectOrder().then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          this.form.ordering = data.data;
        }
      });
    },
    // 获取可见范围数据
    // getUserSelectOrder (val) {
    //   this.userOptions = []
    //   this.dataUserOptions = []
    //   this.deptShow = val
    //   this.userOptions = this.selectAlllInfoFun(val)
    //   // userSelectOrder(val).then(res => {
    //   //   if (res.data.retCode === 200 && res.data.data) {
    //   //     this.userOptions = res.data.data;
    //   //     // this.userValue = [];
    //   //   }
    //   // });
    // },
    changeMenuRange (val) {
      this.deptShow = val
      this.userOptions = []
      this.userValue = []
      this.userOptions = this.selectAlllInfoFun(val)
    },
    changeDataRange(val) {
      this.dataDeptShow = val
      this.dataUserValue = []
      this.dataUserOptions =[]
      this.dataUserOptions = this.selectAlllInfoFun(val)
    },
    async getSelectAllNewable () {
      let id = this.$store.state.userId
      await getWorkOrderTypeByUserId(id).then(res => {
        if (res.data.retCode === 200) {
          this.cores = res.data.data;
        }
      });
      await this.changeWorkType();
    },
    getSelectAllMenuVisibleType () {
      selectAllMenuVisibleType().then(res => {
        if (res.data.retCode === 200) {
          this.menuRange = res.data.data;
        }
      });
    },
    async getSelectById () {
      this.getSelectAllMenuVisibleType();
      this.getSelectAllNewable();
      let id = this.$store.state.filterMenuId;
      let _this = this
      await selectById(id).then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          _this.form = data.data;
          _this.region =  data.data.filterMenuVisibleType?data.data.filterMenuVisibleType:'all';
          _this.dataRegion = data.data.filterMenuDataType?data.data.filterMenuDataType:'all';
          _this.form.fieldInfoList && _this.form.fieldInfoList.forEach(item => {
            _this.orderHeaderValue.push(item.prop)
          })
          _this.deptShow = _this.region
          _this.dataDeptShow = _this.dataRegion
          _this.userOptions = _this.selectAlllInfoFun(_this.region)
          _this.dataUserOptions = _this.selectAlllInfoFun(_this.dataRegion)
          if (_this.region == 'dept') {
            _this.userValue = JSON.parse(data.data.filterMenuVisibleIds)
          } else {
            _this.userValue = data.data.filterMenuVisibleIds ? data.data.filterMenuVisibleIds.split(',') : ''
          }
          if (_this.dataRegion == 'dept') {
            _this.dataUserValue = JSON.parse(data.data.filterMenuDataTypeIds)
          } else {
            _this.dataUserValue = data.data.filterMenuDataTypeIds ? data.data.filterMenuDataTypeIds.split(',') : ''
          }
          _this.allTableData = data.data.filterCondition.condition;
          _this.tableData = [];
          for (var i = 0; i < _this.allTableData.length; i++) {
            _this.addTableData();
            _this.tableData[i].typeValue = _this.allTableData[i].firstId.value; // 第一个
            _this.tableData[i].containValue = _this.allTableData[i].secondDataId.value; // 第二个
            _this.tableData[i].containValueUser = _this.allTableData[i].typeId.value; // 第二个
            _this.tableData[i].dataList = _this.allTableData[i].fourthList;
            _this.tableData[i].infoVal = _this.allTableData[i].value; // 第三个
            _this.tableData[i].infoVals = _this.allTableData[i].value;
            if (
              _this.allTableData[i].tagIn === 2 &&
              _this.allTableData[i].shapeTag === 5
            ) {
              _this.tableData[i].hourOne = _this.tableData[i].infoVal[0];
              _this.tableData[i].hourTwo = _this.tableData[i].infoVal[1];
            }
            _this.selectAllConditionVal = _this.allTableData[i].firstIdList;
            _this.tableData[i].selectSecondConditionValUser = _this.allTableData[
              i
            ].secondList;
            _this.tableData[i].selectSecondConditionVal = _this.allTableData[
              i
            ].thirdList;
            _this.tableData[i].tagIn = _this.allTableData[i].tagIn;
            _this.tableData[i].shapeTag = _this.allTableData[i].shapeTag;
            _this.tableData[i].tagShow = _this.allTableData[i].tag;
          }
        }
      });
      // await userSelectOrder(_this.region).then(res => {
      //   _this.deptShow = _this.region
      //   if (res.data.retCode === 200 && res.data.data) {
      //     _this.userOptions = res.data.data;
      //   }
      // });
    },
    handleDelete (index, row) {
      // console.log(this.tableData[index])
      this.tableData.splice(index, 1);
    },
    hourChange (index, row) {
      this.tableData[index].infoVal = [
        this.tableData[index].hourOne,
        this.tableData[index].hourTwo
      ];
    },
    selectsChange (index, row) {
      // console.log(this.tableData)
      // this.tableData.push({})
      // this.tableData.splice(index + 1, 1)
      this.tableData[index].infoVal = this.tableData[index].infoVals;
    },
    addTableData () {
      let item = {
        typeValue: "", // 第一个值
        containValue: "", // 第二个值
        containValueUser: "", // 第二个值
        info: "",
        selectSecondConditionVal: [],
        selectSecondConditionValUser: [],
        tagShow: 1,
        userVal: [],
        dataList: [
          {
            label: "下拉框1",
            value: "111"
          },
          {
            label: "下拉框2",
            value: "111"
          }
        ],
        shapeTag: "",
        tagIn: "",
        infoVal: "", // 第三个值
        infoVals: [], // 第三个值
        hourOne: "",
        hourTwo: ""
      };
      this.tableData.push(item);
    },
    // 新建接口
    addCreateWorkOrderFilterMenu () {
      let params = {
        menuDesc: this.form.menuDesc,
        name: this.form.name,
        ordering: this.form.ordering,
        status: this.form.status,
        tagId: this.tagId,
        tagName: "自定义",
        userId: this.$store.state.userId,
        fieldInfoList: this.orderHeaderArray || [],
        visibleRange: {
          nameList: "",
          type: this.region,
          value: this.userValue || []
        },
        dataRange: {
          nameList: "",
          type: this.dataRegion,
          value: this.dataUserValue || []
        },
        workOrderTypeId: this.form.workOrderTypeId,
        workOrderTypeName: this.workOrderTypeName,
        filterCondition: { condition: [] }
      };
      for (var i = 0; i < this.tableData.length; i++) {
        params.filterCondition.condition.push({
          firstId: this.tableData[i].typeValue,
          secondDataId: this.tableData[i].containValue,
          typeId: this.tableData[i].containValueUser,
          value: this.tableData[i].infoVal,
          firstList: this.selectAllConditionVal || [],
          secondList: this.tableData[i].selectSecondConditionValUser || [],
          thirdList: this.tableData[i].selectSecondConditionVal || [],
          fourthList: this.tableData[i].dataList || []
        });
      }
      if (!params.userId) {
        this.$message({
          type: "error",
          message: '请选择当前用户'
        });
      } else {
        createWorkOrderFilterMenu(params).then(res => {
          let data = res.data;
          if (data.retCode === 200) {
            this.$message({
              type: "success",
              message: data.msg
            });
            this.$router.push("/customMenu");
          } else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        });

      }
    },
    // 编辑接口
    getUpdateContent () {
      let params = {
        id: this.form.id,
        menuDesc: this.form.menuDesc,
        name: this.form.name,
        ordering: this.form.ordering,
        status: this.form.status,
        tagId: this.tagId,
        tagName: "自定义",
        userId: this.$store.state.userId,
        visibleRange: {
          nameList: "",
          type: this.region,
          value: this.userValue || []
        },
        dataRange: {
          nameList: "",
          type: this.dataRegion,
          value: this.dataUserValue || []
        },
        fieldInfoList: this.orderHeaderArray || [],
        workOrderTypeId: this.form.workOrderTypeId,
        workOrderTypeName: this.workOrderTypeName,
        filterCondition: { condition: [] }
      };
      for (var i = 0; i < this.tableData.length; i++) {
        params.filterCondition.condition.push({
          firstId: this.tableData[i].typeValue,
          secondDataId: this.tableData[i].containValue,
          typeId: this.tableData[i].containValueUser,
          value: this.tableData[i].infoVal,
          firstList: this.selectAllConditionVal || [],
          secondList: this.tableData[i].selectSecondConditionValUser || [],
          thirdList: this.tableData[i].selectSecondConditionVal || [],
          fourthList: this.tableData[i].dataList || []
        });
      }
      if (!params.userId) {
        this.$message({
          type: "error",
          message: '请选择当前用户'
        });
      } else {
        updateContent(params).then(res => {
          let data = res.data;
          if (data.retCode === 200) {
            this.$message({
              type: "success",
              message: data.msg
            });
            this.$router.push("/customMenu");
          } else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        });
      }
    },
    onSubmit (formName) {
      this.$store.commit("optionTypeFun", "2");
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.$store.state.filterMenuId) {
            this.getUpdateContent();
          } else {
            this.addCreateWorkOrderFilterMenu();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.ab-dw {
  width: 80%;
  margin: 0 auto;
}
.el-icon-arrow-left {
  font-size: 13px;
  color: #b60028;
  font-weight: 700;
  padding: 0 5px;
  cursor: pointer;
}
el-button el-button--danger el-button--mini .el-select {
  margin-right: 18px;
}
>>> .select-table .el-form-item__content {
  border: 1px solid #e2e2e2;
  padding: 10px 20px 0;
  border-radius: 4px;
  font-weight: 700px;
}
[data-v-79a2f498] .select-table >>> .el-form-item__content {
  font-weight: 700;
}
.el-button--text {
  font-size: 13px;
  color: #2393f1;
}

>>> .el-table .cell,
.el-table th div {
  padding-right: 10px;
  overflow: hidden;
  text-overflow: clip;
}
>>> .el-table .cell {
  padding-left: 0;
}
.button {
  color: #2c97f1;
  border: none;
  background-color: #ffffff;
  padding-left: 0;
  padding-top: 10px;
  cursor: pointer;
  background-color: #f4f6f9;
  font-size: 13px;
}
.sequence-flow-btn {
  padding-top: 18px;
  background: none;
  margin-right: 30px;
}
>>> .el-transfer__buttons {
  padding: 120px 30px;
}
.table_header_setting >>> .el-form-item__content {
  line-height: 0px;
}
</style>
